<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/forget.css">
    <title>忘记密码</title>
</head>
<body class="black">
<div class="register-box">
    <form method="post" action="{:url('login/forget')}">
    <dl class="buf_item">
        <dt>手机号</dt>
        <dd>
            <input type="number" id="phone" >
        </dd>
        <button class="yzm">获取验证码</button>
    </dl>
    <dl class="buf_item">
        <dt>验证码</dt>
        <dd>
            <input type="number" id="code">
        </dd>
    </dl>
    <dl class="buf_item">
        <dt>新密码</dt>
        <dd>
            <input type="password" id="npwd">
        </dd>
    </dl>
    <dl class="buf_item">
        <dt>确认密码</dt>
        <dd>
            <input type="password" id="cpwd">
        </dd>
    </dl>
    </form>
</div>
<button class="btn">确 定</button>
</body>
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/layer.js"></script>
<script type="text/javascript">
    $('.yzm').click(()=>{
        var phone=$('#phone').val().trim();
        var phoneReg=/^[0-9]{11}$/;
        if(!phone) {
            layer.msg("请输入手机号", {time: 1500})
        }else if(!phoneReg.test(phone)){
            layer.msg("请输入正确的手机号码", {time: 1500})
        }else{
            //获取验证码
            var time=60;
            var timer=setInterval(()=>{
                time--;
                $('.yzm').html(time+'秒');
                if(time<=0){
                    clearInterval(timer);
                    $('.yzm').html('再次获取');
                }
            },1000);
        }
    })
    $('#cpwd').blur(()=>{
        var npwd=$('#npwd').val().trim();
        var cpwd=$('#cpwd').val().trim();
        if(npwd!==cpwd){
            layer.msg("两次密码不一致",{time:1500});
        }
    })
    $(".btn").click(()=>{
        var phone=$('#phone').val().trim();
        var code=$('#code').val().trim();
        var npwd=$('#npwd').val().trim();
        var cpwd=$('#cpwd').val().trim();
        if(!phone){layer.msg("请输入手机号",{time:1500})}
        else if(!code){layer.msg("请输入验证码",{time:1500})}
        else if(!npwd){layer.msg("请输入新密码",{time:1500})}
        else if(!cpwd){layer.msg("请输入确认密码",{time:1500})}
        else if(npwd!==cpwd){
            layer.msg("两次密码不一致",{time:1500});
        }
        else{
            $.ajax({
                type:'post',
                url:$("form").attr('action'),
                data:$("form").serialize(),
                success:function (data){
                    if(data.code==1){
                        layer.msg("修改成功",{time:1500});
                        location.href='{:url("index/index")}'
                    }else{
                        layer.msg(data.msg,{time:1500});
                    }
                },
                error:function () {

                }

            })
        }
    })
</script>
</html>